import ROBOT_AVATAR from '@/assets/image/avatar_robo.png';
import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import HandleMode from './com/HandleMode';
import InputMode from './com/InputMode';
import './index.less';
const SpaceBot: React.FC<any> = ({
  spaceBot,
  dispatch,
  router,
  setExpendBot,
  hitClick = () => {},
  createSuccess = () => {},
}) => {
  const [isBotExpend, setIsBotExpend] = useState<boolean>(false); //展开收起
  const { curMode, curTab } = spaceBot;

  //公共更新model的方法
  const updateState = (updateObj: any) => {
    dispatch({
      type: 'spaceBot/updateState',
      payload: updateObj,
    });
  };

  //展开和收起
  const toggleShowDialog = () => {
    setIsBotExpend(!isBotExpend);
    setExpendBot(!isBotExpend);
  };
  //初始选择模式
  useEffect(() => {
    //根据router初始化显示不同的样式
    //router= spaceHome 不显示底部下拉 没有HandleMode模式
    if (router && router === 'spaceHome') {
      updateState({
        curMode: 'input', //当前模式为输入
        showBottomSelect: false, //不显示底部下拉
      });
    } else if (router && router === 'spaceData') {
      updateState({
        curMode: 'input', //当前模式为处理
        showBottomSelect: true, //显示底部下拉
      });
    }
  }, []);
  //切换tab时 设置默认成输入模式
  useEffect(() => {
    if (curTab) {
      updateState({
        curMode: 'input', //当前模式为输入
      });
    }
  }, [curTab]);
  //命中结果 点击回调
  const hitClickCb = (data: any) => {
    hitClick(data);
  };

  return (
    <div className={`SpaceBotWrap ${isBotExpend ? 'minBotWrap' : ''}`}>
      <div className="botAvatarBox" onClick={toggleShowDialog}>
        <img className="botAvatar" src={ROBOT_AVATAR} alt="" height={60} width={60} />
      </div>
      <div className={`SpaceBotBox ${isBotExpend ? 'expendBot' : 'collapseBot'}`}>
        <div className="SpaceBotTitle">写作实习生 - 小麦</div>

        {curMode === 'input' ? (
          <InputMode router={router} hitClickCb={hitClickCb} />
        ) : curMode === 'handle' ? (
          <HandleMode createSuccess={createSuccess} />
        ) : (
          <></>
        )}
      </div>
    </div>
  );
};

// export default SpaceBot;
export default connect(({ spaceBot }) => ({ spaceBot }))(SpaceBot);
